<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .menu{
        cursor:pointer;
    }
  </style>
  <script>
    function dian(thisa){
        nextNode = thisa.nextElementSibling; 	//获取当前节点的下一节点
        if(nextNode.style.display=='none'){ 		//如果下一节点为隐藏状态
            nextNode.style.display='block';  		//显示节点
        }else{
            nextNode.style.display='none';    	//否则隐藏
        }
    }
  </script>
 </head>
 <body>
  <ul>
    <li class='menu' onclick='dian(this)'>导航一</li>
    <li style='display:none;'>
        <a href='JavaScript:void();'>菜单1</a><br/>
        <a href='JavaScript:void();'>菜单2</a><br/>
        <a href='JavaScript:void();'>菜单3</a><br/>
        <a href='JavaScript:void();'>菜单4</a><br/>
        <a href='JavaScript:void();'>菜单5</a><br/>
    </li>
    <li class='menu' onclick='dian(this)'>导航二</li>
    <li  style='display:none;'>
        <a href='JavaScript:void();'>菜单6</a><br/>
        <a href='JavaScript:void();'>菜单7</a><br/>
        <a href='JavaScript:void();'>菜单8</a><br/>
        <a href='JavaScript:void();'>菜单9</a><br/>
        <a href='JavaScript:void();'>菜单10</a><br/>
    </li>
    <li class='menu' onclick='dian(this)'>导航三</li>
    <li  style='display:none;'>
        <a href='JavaScript:void();'>菜单11</a><br/>
        <a href='JavaScript:void();'>菜单12</a><br/>
        <a href='JavaScript:void();'>菜单13</a><br/>
        <a href='JavaScript:void();'>菜单14</a><br/>
        <a href='JavaScript:void();'>菜单15</a>
    </li>
  </ul>
 </body>
</html>
